<template>
    <div class="cardItem">
        <div :class="['item', `bg_${index + 1}`]" v-for="(item, index) in source" :key="index">
            <div class="name">{{ item.name }}</div>
            <div class="content">
                <span class="value">{{ item.value }}</span>
                <span class="unit">{{ item.unit }}</span>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Operation',
        props: {
            source: {
                type: Array,
                default: () => [],
            },
        },
        methods: {},
    }
</script>
<style lang="scss" scoped>
    .cardItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0px;
        .item {
            border: 1px solid #2c5a8f;
            padding: 20px;
            flex: 1;
            margin-right: 15px;
            font-family:
                PingFangSC-Medium,
                PingFang SC;
            border-radius: 4px;
            .name {
                position: relative;
                font-size: 16px;
                padding-bottom: 2px;
                font-weight: 500;
                color: #ffffff;
                line-height: 22px;
                padding-left: 10px;
                &::before {
                    position: absolute;
                    top: 4px;
                    left: 0;
                    content: '';
                    display: inline-block;
                    width: 2px;
                    height: 14px;
                    margin-right: 4px;
                    background: #fff;
                }
            }
            .content {
                display: flex;
                align-items: center;
                .value {
                    font-size: 28px;
                    font-weight: 500;
                    color: #ffffff;
                    line-height: 40px;
                }
                .unit {
                    font-size: 14px;
                    font-weight: 0;
                    padding-left: 10px;
                    color: #ffffff;
                }
            }
        }
        .bg_1 {
            position: relative;
            background: linear-gradient(to right, #00e7ffff, #17a7f4ff);
            &:before {
                position: absolute;
                content: '';
                right: 16px;
                top: 13px;
                width: 62px;
                height: 80px;
                background: url('~@/assets/image/energyPlan/energuPlan_1.png');
            }
        }
        .bg_2 {
            position: relative;
            background: linear-gradient(to right, #41a2f6ff, #2b8effff);
            &:before {
                position: absolute;
                content: '';
                right: 16px;
                top: 13px;
                width: 67px;
                height: 79px;
                background: url('~@/assets/image/energyPlan/energuPlan_2.png');
            }
        }
        .bg_3 {
            position: relative;
            background: linear-gradient(to right, #3ab9ffff, #438cfcff);
            &:before {
                position: absolute;
                content: '';
                right: 16px;
                top: 13px;
                width: 65px;
                height: 78px;
                background: url('~@/assets/image/energyPlan/energuPlan_3.png');
            }
        }
        .bg_4 {
            position: relative;
            background: linear-gradient(to right, #497ff9ff, #6d4effff);
            &:before {
                position: absolute;
                content: '';
                right: 16px;
                top: 13px;
                width: 83px;
                height: 83px;
                background: url('~@/assets/image/energyPlan/energuPlan_4.png');
            }
        }
    }
</style>
